<template>
  <i :class="[family, cls]" :style="style"></i>
</template>

<script>
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'ArkIconFont',
  props: {
    family: {
      type: String,
      default: 'iconfont',
    },
    cls: {
      type: String,
      required: true,
    },
    size: {
      type: [Number, String],
      default: 'inherit'
    },
    color: {
      type: String,
    }
  },
  computed: {
    style() {
      const size = this.size;
      const style = {'font-size': Number.isNaN(Number(size)) ? size : size + 'px'};

      if (this.color) {
        style.color = this.color;
      }

      return style;
    },
  }
});
</script>